<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/style.css">
    <title>携程网</title>
</head>
<body>
    <!-- app部分 -->
    <div class="app">
        <span></span>
        <div class="container">
            <h1>携程旅行APP</h1>
            <p>放心的服务，放心的价格</p>
        </div>
        <div class="btn">立即使用</div>
    </div>

    <!-- banner部分 -->
    <div class="banner">
        <div class="search">
            <input type="text" placeholder="搜索:目的地/酒店/景点/航班号">
            <span class="icon"></span>
        </div>

        <div class="user">
            <span></span>
            <p>我的</p>
        </div>
        
        <ul class="list">
            <li>
                <span></span>
                <p>攻略·景点</p>
            </li>
            <li>
                <span></span>
                <p>门票·玩乐</p>
            </li>
            <li>
                <span></span>
                <p>美食林</p>
            </li>
            <li>
                <span></span>
                <p>周边游</p>
            </li>
            <li>
                <span></span>
                <p>一日游</p>
            </li>
        </ul>
    </div>

    <!-- 导航模块 -->
    <div class="nav">
        <div class="row">
            <div class="nav-item">酒店</div>
            <div class="nav-item">民宿·客栈</div>
            <div class="nav-item">特价·爆款</div>
        </div>
        <div class="row">
            <div class="nav-item">机票</div>
            <div class="nav-item">火车票</div>
            <div class="nav-item">汽车·船票</div>
            <div class="nav-item">专车·租车</div>
        </div>
        <div class="row">
            <div class="nav-item">旅游</div>
            <div class="nav-item">高铁游</div>
            <div class="nav-item">邮轮游</div>
            <div class="nav-item">定制游</div>
        </div>
    </div>

    <!-- 菜单 -->
    <ul class="menu">
        <li>
            <span></span>
            <p>自由行</p>
        </li>
        <li>
            <span></span>
            <p>WIFI电话卡</p>
        </li>
        <li>
            <span></span>
            <p>保险·签证</p>
        </li>
        <li>
            <span></span>
            <p>换钞·购物</p>
        </li>
        <li>
            <span></span>
            <p>当地向导</p>
        </li>
        <li>
            <span></span>
            <p>特价机票</p>
        </li>
        <li>
            <span></span>
            <p>礼品卡</p>
        </li>
        <li>
            <span></span>
            <p>申卡·借钱</p>
        </li>
        <li>
            <span></span>
            <p>旅拍</p>
        </li>
        <li>
            <span></span>
            <p>更多</p>
        </li>
    </ul>

    <!-- 广告 -->
    <div class="ads">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3">获取跟多福利></div>
    </div>
    <div class="ads-list">
        <img src="./img/ad_1.jpg" alt="">
        <img src="./img/ad_2.jpg" alt="">
        <img src="./img/ad_3.jpg" alt="">
        <img src="./img/ad_4.jpg" alt="">
        <img src="./img/ad_5.jpg" alt="">
        <img src="./img/ad_6.jpg" alt="">
    </div>

    <!-- 按钮组 -->
    <ul class="btns">
        <li>
            <span></span>
            <p>电话预定</p>
        </li>
        <li>
            <span></span>
            <p>下载客户端</p>
        </li>
        <li>
            <span></span>
            <p>我的</p>
        </li>
    </ul>

    <!-- 底部 -->
    <div class="footer">
        <p>网站地图 | Language | 电脑版</p>
        <p>@2018携程旅行 | 沪ICP备08023580</p>
    </div>

</body>
</html>